<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工管理</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-form :inline="true" :model="staffForm" class="demo-form-inline">
        <el-form-item label="编号">
            <el-input v-model="staffForm.staffId" placeholder="请输入员工编号"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
            <el-input v-model="staffForm.staffName" placeholder="请输入员工姓名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search()">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-table
            :data="staffs"
            border
            style="width: 100%">
        <el-table-column
                prop="staffid"
                label="员工编号"
        >
        </el-table-column>
        <el-table-column
                prop="staffname"
                label="员工姓名"
        >
        </el-table-column>
        <el-table-column
                prop="idcard"
                label="身份证号码">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="电话号码">
        </el-table-column>
        <el-table-column
                prop="entrytime"
                label="入职日期">
        </el-table-column>
        <el-table-column
                prop="role.rolename"
                label="职务名称">
        </el-table-column>
        <el-table-column
                prop="department.deptName"
                label="部门名称">
        </el-table-column>
        <el-table-column
                prop="department.remark"
                label="职位描述">
        </el-table-column>
        <el-table-column
                prop="state"
                label="状态">
            <template  slot-scope="scope">
                <el-tag
                        type="success"
                        v-if="scope.row.state==1"
                        effect="dark">
                    在  职
                </el-tag>
                <el-tag
                        type="info"
                        v-else
                        effect="dark">
                    未入职
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="deleterole(scope.row)" type="primary" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>


</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            staffForm: {},
            staffs: [],
            current: 1,
            pageSize: 5,
            total: 0,


        },
        created() {
            this.loadTable();
            this.loadDepts();
            this.loadRoles();
        },
        methods: {
            search() {
                this.current = 1;
                this.loadTable();
                console.log(this.staffForm);
            },
            loadTable() {
                axios.post("/staff/lizhi/" + this.current + "/" + this.pageSize, this.staffForm).then(result => {
                    console.log("-------staff--------")
                    console.log(result);
                    this.staffs = result.data.data.list;
                    this.total = result.data.data.total;
                });
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadTable();
            },
            handleCurrentChange(val) {
                this.current = val;
                this.loadTable();
            },


            //删除开始
            deleterole(row) {
                console.log(row);
                axios.delete("/staff/deletestaff/" + row.id)
                    .then(result => {
                        this.loadTable();
                        this.$message.success('删除成功');
                    })
                    .catch(error => {
                        console.error('删除失败', error);
                        this.$message.error('删除失败');
                    });
            },
            //删除结束


            //编辑结束
            loadDepts() {
                axios.get("/dept/selectDepts").then(result => {
                    console.log("----dept---")
                    console.log(result)
                    this.depts = result.data.data;
                });
            },
            loadRoles() {
                axios.get("/role/selectRoles").then(result => {
                    console.log("---role---")
                    console.log(result)
                    this.roles = result.data.data;
                });
            }
        }
    })
</script>
